import { Component } from 'react';
import { Card, Typography, Space, Radio, Divider } from 'antd';

const { Title, Paragraph } = Typography;

// 定义一组丰富的颜色
const COLORS = [
  '#f5222d', // 红
  '#fa541c', // 橙
  '#faad14', // 黄
  '#52c41a', // 绿
  '#1890ff', // 蓝
  '#40a9ff', // 浅蓝
  '#722ed1', // 紫
  '#eb2f96', // 粉红
  '#fa8c16', // 橘色
  '#13c2c2', // 青
  '#8c8c8c', // 灰
  '#2f54eb', // 深蓝
];

class MultiColorText extends Component {
  constructor(props) {
    super(props);
    this.state = {
      effectType: 'char', // 字符级或单词级
      texts: [
        "彩虹文字效果展示",
        "Ant Design 颜色应用",
        "React 类组件示例",
        "五彩缤纷的视觉体验",
        "前端UI设计与实现",
        "Colorful Text Effects in React"
      ]
    };
  }

  // 按字符拆分并应用不同颜色
  renderCharColorText = (text) => {
    return text.split('').map((char, index) => {
      // 跳过空格不应用颜色
      if (char === ' ') {
        return <span key={index}>&nbsp;</span>;
      }
      
      const colorIndex = index % COLORS.length;
      return (
        <span 
          key={index} 
          style={{ 
            color: COLORS[colorIndex],
            transition: 'all 0.3s ease',
            textShadow: '1px 1px 2px rgba(0,0,0,0.1)',
            fontSize: '1.1em'
          }}
          onMouseOver={(e) => {
            e.target.style.transform = 'scale(1.1)';
            e.target.style.textShadow = '1px 1px 3px rgba(0,0,0,0.2)';
          }}
          onMouseOut={(e) => {
            e.target.style.transform = 'scale(1)';
            e.target.style.textShadow = '1px 1px 2px rgba(0,0,0,0.1)';
          }}
        >
          {char}
        </span>
      );
    });
  };

  // 按单词拆分并应用不同颜色
  renderWordColorText = (text) => {
    return text.split(' ').map((word, index) => {
      const colorIndex = index % COLORS.length;
      return (
        <span 
          key={index} 
          style={{ 
            color: COLORS[colorIndex],
            marginRight: '8px',
            transition: 'color 0.3s ease'
          }}
          onMouseOver={(e) => {
            // 鼠标悬停时切换到下一个颜色
            const nextIndex = (colorIndex + 1) % COLORS.length;
            e.target.style.color = COLORS[nextIndex];
          }}
          onMouseOut={(e) => {
            e.target.style.color = COLORS[colorIndex];
          }}
        >
          {word}
        </span>
      );
    });
  };

  handleEffectChange = (e) => {
    this.setState({ effectType: e.target.value });
  };

  render() {
    const { effectType, texts } = this.state;

    return (
      <div style={{ padding: '24px', maxWidth: 800, margin: '0 auto' }}>
        <Card 
          title="颜色相间文字效果展示" 
          variant="outlined"  // 替代bordered={true} // variant="plain" 如果需要无边框样式 // 替代bordered={false}
          style={{ boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)' }}
        >
          <div style={{ marginBottom: '20px' }}>
            <Title level={5}>效果类型选择</Title>
            <Radio.Group 
              value={effectType} 
              onChange={this.handleEffectChange}
              buttonStyle="solid"
            >
              <Radio.Button value="char">字符级颜色相间</Radio.Button>
              <Radio.Button value="word">单词级颜色相间</Radio.Button>
            </Radio.Group>
          </div>

          <Divider>示例文本</Divider>

          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            {texts.map((text, index) => (
              <Paragraph key={index} style={{ fontSize: '1.2em', lineHeight: '1.8' }}>
                {effectType === 'char' 
                  ? this.renderCharColorText(text) 
                  : this.renderWordColorText(text)
                }
              </Paragraph>
            ))}
          </Space>

          <Divider style={{ marginTop: '20px' }} />
          
          <Paragraph type="secondary">
            提示：鼠标悬停在文字上可以看到额外的交互效果
          </Paragraph>
        </Card>
      </div>
    );
  }
}

export default MultiColorText;
    